import React, { Component } from 'react';
import '../styles/Classify.scss'

import * as service from '../api/index'
class Classify extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classificationList: [
                { classificationList1: [] }
            ],
            btnid: null,
            cuurrnntindex: 0,
            list2: null
        }
    }
    async btnclick(id, index) {
        this.setState({ cuurrnntindex: index })
        let res = await service.category_subcate({ id })
        this.setState({ list2: res.data.subcate.subcategory})
        this.setState({ list3: res.data.subcate.subcategory.subNavs})
    }
    async componentDidMount() {
        let res = await service.category_list()
        this.setState({ btnid: res.data.list })

        let res2 = await service.category_subcate({ id:res.data.list[0].id })
        this.setState({ list2: res2.data.subcate.subcategory})
        this.setState({ list3: res2.data.subcate.subcategory.subNavs})
    }
    render() {
        return (
            <div className='Classify'>
                <div className="btns">
                    {
                        this.state?.btnid?.map((item, index) => {
                            return (
                                <div className={'btn ' + (this.state.cuurrnntindex == index ? 'active' : '')} onClick={() => { this.btnclick(item.id, index) }}>{item.name}</div>
                            )
                        })

                    }
                </div>

                <div className="rigth">
                    {
                        this.state?.list2?.map((item2, index) => {
                            return (
                                <div className='list2' key={index}>
                                    <h3>{item2.name}</h3>
                                    <div className='list3'>
                                        {
                                            item2?.subNavs?.map((item3, index) => {
                                                return (
                                                    <div className='item3' key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className='name'>{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>

                            )
                        })
                    }
                <div className='dibu'></div>
                </div>
            </div>
        );
    }
}

export default Classify;